<template>
  <div class="bg" @click="hideTip()" :style="{height:property.height + 'px', width:property.width + 'px'}">
    <img class="background" src="../../../../../static/img/bg_map.png"/>
    <div class="layer">
      <div v-for="show_data in showData">
        <circle-icon :point-data="show_data" @showComponent="showTip"></circle-icon>
      </div>
    </div>
    <tipComponment v-if="isComponentShowed" :tip-datas="tipDatas" @closeComponent="hideTip"
                   :params="params"></tipComponment>
  </div>
</template>

<script>
  import { getPointDetailInfo } from '@api/backEnd/todayBoard'

  import circleIcon from './circleIcon.vue'
  import tipComponment from './tipComponment.vue'

  export default {
    name: 'mapBoard',
    props: {
      property: {},
      showData: {},
      params: {}
    },
    data () {
      return {
        isComponentShowed: false,
        tipDatas: {},
        getPointDetailInfo
      }
    },
    methods: {
      hideTip () {
        if (this.isComponentShowed !== false) {
          this.isComponentShowed = false
          // this.$emit('changeView')
        }
      },
      showTip: function (pointData) {
        this.isComponentShowed = false
        let param = {
          freightName: pointData.stationName,
          startTime: this.params.startTime,
          endTime: this.params.endTime
        }
        getPointDetailInfo(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.tipDatas.width = Number(pointData.width) + 2
            this.tipDatas.height = Number(pointData.height) + 4
            this.tipDatas.arriveCount = res.data.data['到达列车数']
            this.tipDatas.sendCount = res.data.data['到达发货量']
            this.tipDatas.arriveWeight = res.data.data['发出列车数']
            this.tipDatas.sendWeight = res.data.data['发出货物量']
            this.tipDatas.pointName = pointData.stationName

            this.isComponentShowed = true
          }
        })
        // this.$emit('changeView', pointData.stationName)
      },
      initMapBoard () {
        this.isComponentShowed = false
      }
    },
    components: { circleIcon, tipComponment },
    created () {
    },
    mounted () {
    },
    updated () {
    }
  }
</script>

<style scoped>

  .bg {
    position: relative;
    display: inline-block;
    margin: 100px auto;
    text-align: center;
    float: left;
  }

  .bg .layer {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .background {
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
  }

</style>
